import { create } from "zustand";

interface CartItem {
  id: number;
  name: string;
}

interface CartStore {
  items: CartItem[];
  addToCart: (item: CartItem) => void;
}

const useCartStore = create<CartStore>((set) => ({
  items: [],
  addToCart: (item) => set((state) => ({ items: [...state.items, item] })),
}));

export const ShoppingCartZustand = () => {
  const { items, addToCart } = useCartStore();

  return (
    <div>
      <button onClick={() => addToCart({ id: 1, name: "小米手机" })}>
        加入购物车
      </button>
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
